<template>
  <transition name="message-fade">
    <div v-if="visible" class="message" :class="[`message-${type}`]">
      <i v-if="icon" :class="icon"></i>
      <span class="message-content">{{ message }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'FeedbackMessage',
  props: {
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'info',
      validator: value => ['success', 'warning', 'info', 'error'].includes(value)
    },
    duration: {
      type: Number,
      default: 3000
    },
    icon: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    this.visible = true
    if (this.duration > 0) {
      setTimeout(() => {
        this.visible = false
        setTimeout(() => {
          this.$destroy()
          this.$el.parentNode.removeChild(this.$el)
        }, 300)
      }, this.duration)
    }
  }
}
</script>

<style scoped>
.message {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  z-index: 9999;
}

.message-content {
  margin-left: 8px;
}

.message-success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.message-warning {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.message-info {
  background-color: #f4f4f5;
  color: #909399;
}

.message-error {
  background-color: #fef0f0;
  color: #f56c6c;
}

.message-fade-enter-active,
.message-fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.message-fade-enter,
.message-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -20px);
}
</style> 